<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
      <input type="text" v-model="msg" />
      <h3>{{msg}}</h3>
      <button @click="stus[0].name='rose'">改变</button>
      <h4>{{stus[0].name}}</h4>
  </div>
</body>
<script>
     //watch监听的是单个属性
     //基本的数据类型 简单监视
     //复杂的数据类型 深度监视
     new Vue({
         el:"#app",
         data:function () {
             return {
                 msg:"",
                 stus:[{name:"jack"}]
             };
         },
         watch:{
             msg:function (newV,oldV) {
                 console.log(newV,oldV);
                 if(newV == "a"){
                     console.log("a");
                 }
             },
             //监听复杂数据类型
             stus:{
                 deep:true, //深度监听
                 handler:function (newV,oldV) {
                     console.log(newV[0].name);
                 }
             }
         }
     });
</script>
</html>